<!-- 头部组件 -->
<!-- <template>
	<div class="header">
		<div class="header-logo">
			111
		</div>
	</div>
</template>

<style lang="scss" scoped>
@import '@/styles/config.scss';
	.header {
		height: 10%;
		width: 100%;
		background-color: $globalColor;
		border-bottom: 1px solid #8C1313;

		&-logo {
			height: 100%;
			width: 30%;
		}
	}

</style> -->
<!-- 头部组件 -->
<template>
	<div class="header">
		<div class="header-logo">
			<img class="headerLogoImg"
				src="https://img.zcool.cn/community/01b1ec5d023dfca801213ec2d78e95.png@1280w_1l_2o_100sh.png" >
			<span class="headerLogoText" circle>网易云音乐</span>
		</div>
		<!-- 左右箭头 -->
		<el-row>
			<el-button class="headerLeft" color="#4f4f4f" :icon="ArrowLeft" size="small" circle @click="$router.go(-1)" />
			<el-button class="headerRight" color="#4f4f4f" :icon="ArrowRight" size="small" circle @click="$router.go(1)" />
		</el-row>

		<!-- 搜索框 -->
		<div class="search-box">
			<input class="headerSearch" :icon="Search" round :placeholder="searchKeywords" />
			<Search class="search-icon" />
		</div>
			
		<el-button class="headerMicroghone" color="#4f4f4f" :icon="Microphone" size="string" circle />

		<!-- 用户头像及下拉框 -->
		<el-dropdown trigger="click">
			<span class="el-dropdown-link">
				username
				<el-icon class="el-icon--right"><caret-bottom /></el-icon>
			</span>
			<template #dropdown>
				<el-dropdown-menu>
					<el-dropdown-item >
						
					</el-dropdown-item>
				</el-dropdown-menu>
			</template>
		</el-dropdown>


		<el-button class="MagicStick" color="none" opacity="0" :icon="MagicStick" circle />
		<el-button class="Setting" color="none" opacity="0" :icon="Setting" circle />
		<el-button class="Message" color="none" opacity="0" :icon="Message" circle />
		<span class="headerVerticalline">|</span>
		<el-button class="Crop" color="none" opacity="0" :icon="Crop" circle />
		<el-button class="SemiSelect" color="none" opacity="0" :icon="SemiSelect" circle />
		<el-button class="headerCopyDocument" color="none" opacity="0" :icon="CopyDocument" circle />
		<el-button class="headerCloseBold" color="none" opacity="0" :icon="CloseBold" circle />




	</div>
</template>

<script setup lang="ts">
import { ArrowLeft, ArrowRight, MagicStick, Microphone, Search, Setting, Message, CopyDocument, SemiSelect, Crop, CloseBold } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue';
import { defaultSearchKeywordsApi } from '@/api/songs'

let searchKeywords = ref('')

const getSearchKeywords = async () => {
	const res = await defaultSearchKeywordsApi()
	searchKeywords.value = res.data.showKeyword
}

onMounted(() => { 
	getSearchKeywords()
})



</script>

<style lang="scss" scoped>
.header {
	height: 10%;
	width: 100%;
	background-color: #222225;
	border-bottom: 2px solid #8C1313;
	display: flex;
	align-items: center;

	&-logo {
		height: 5vw;
		width: 20%;
		margin-right: 2.3vw;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.headerLogoImg {
		height: 2.6vw;
		width: 2.8vw;
		border-radius: 50%;
		position: absolute;
		top: 1.6vw;
		left:1.9vw;

	}

	.headerLogoText {
		font-size: 1.8vw;
		color: #f7f7f7;
		position: absolute;
		top: 1.3vw;
		left: 7vw;
		margin: auto;
	}

	.headerVerticalline {
		color: #fff;
		opacity: 0.5;
	}

	.el-row {
		width: 10vw;
	}

	.headerLeft,
	.headerRight,
	.headerMicroghone {
		border: #222225;
		width: 3vw;
		height: 3vw;
		font-size: 1.2vw;
	}

	.search-box {
		position: relative;

		.headerSearch {
			width: 15vw;
			margin-left: 0.8vw;
			// margin-right: 10px;
			vertical-align: center;
			height: 2.8vw;
			border-radius: 1.25vw;
			border: none;
			outline: none;
			background-color: #2B2B2E;
			color: #fff;
			text-indent: 3vw;
		}

		.search-icon {
			width: 1.2vw;
			height: 1.2vw;
			top: 0;
			bottom: 0;
			margin: auto 0;
			left: 1.8vw;
			position: absolute;
			color: #fff;
		}
	}



	.MagicStick,
	.Setting,
	.Message,
	.Crop,
	.SemiSelect,
	.headerCopyDocument,
	.headerCloseBold {
		border: #222225;
		font-size: 1.5vw;
		width: 3vw;
		height: 3vw;
	}

	.headerMicroghone {
		margin-right: 16vw;
	}
	.person{
		width: 100px;
		height: 200px;
		border: 1px solid black;
	}

}</style>